import React, { forwardRef, memo, useImperativeHandle, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { ToastWrapper } from './style';
//外面组件需要拿到这个函数组件的ref，因此用forwardRef
export default memo(
  forwardRef(function Toast(props, ref) {
    const [show, setShow] = useState(false);
    const [timer, setTimer] = useState('');
    const { text } = props;
    //外面组件拿函数组件ref的方法，用useImperativeHandle这个hook
    useImperativeHandle(ref, () => ({
      show() {
        // 做防抖处理
        if (timer) clearTimeout(timer);
        setShow(true);
        setTimer(
          setTimeout(() => {
            setShow(false);
          }, 3000)
        );
      },
    }));
    return (
      <CSSTransition in={show} timeout={300} classNames="drop" unmountOnExit>
        <ToastWrapper>
          <div className="text">{text}</div>
        </ToastWrapper>
      </CSSTransition>
    );
  })
);
